<template>
    <div class="center">
        <div class="top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item,index) in this.$route.meta" :key="index">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="lunbo">
            <el-carousel indicator-position="outside" class="content" height="450px">
                <el-carousel-item v-for="(item,index) in arrs" :key="index">
                <div>
                    <img :src="item.url" alt="">
                </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="category" v-if="cate">
            <h1>全部分类</h1>
            <ul>
                <li v-for="(item,index) in cate" :key="index">
                    <img :src="item.url" alt="">
                    <p>{{item.text}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-形有形-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-议话-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-机县-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-你放-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-几档-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
    import instance from "../../api/index"
    export default ({
        name: "kitchen",
        data(){
           return {
                arrs:null,
                cate:null,
                xing:null
           }
        },
         methods: {
            get(){//获取行为 
                this.getcan()
                this.getcate()
                this.getxing()
            },
            async getcan() { //获取业务 轮播图
                let {data} = await instance.get('/home')
                // console.log(data)
                this.arrs = data
            },
            async getcate(){//获取业务 全部分类
                let index = 1
                let {data} = await instance.get('/home/'+index)
                console.log(data)
                this.cate = data
                
            },
            async getxing(){//获取业务 全部分类
                let index = 2
                let {data} = await instance.get('/home/'+index)
                console.log(data)
                this.xing = data
                
            }
        },
        created(){
            this.get()
        }
    })
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
    li {
        list-style:none;
    }
    .center {
        width:60vw;
        margin:0 auto;
    } 
    .center .top {
        margin:33px 0;
    }
    .content {
        width:1200px;
        height:500px;
        margin:0 auto;
        text-align:center;
    }
    .el-carousel__item img {
        width:100%;
        line-height:300px;
        height:100%;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .lunbo div {
        background-color:yellow;
        width:100%;
        height:500px;
    }
    /* 分类 */
    .category {
        height:480px;
        width: 100%;
        background-color:#fff;
        margin-top:17px;
        box-sizing:border-box;
        padding:30px 60px;
    }
    .category h1 {
        width:120px;
        margin:0 auto;
        font-size:28px;
    }
    .category ul {
        display:flex;
        flex-wrap:wrap;
    }
    .category li {
        width:13%;
        height:140px;
        margin:20px 10px;
        text-align:center;

    }
    .category li:hover p{
        color:green;
    }
    .category img {
        width:100%;
        height:130px;
    }
    /* 形有形 */
    .xing {
        height:400px;
        width: 100%;
        background-color:#fff;
        margin-top:17px;
        box-sizing:border-box;
        padding:30px 60px;
    }
    .xing h1 {
        width:120px;
        margin:0 auto;
        font-size:28px;
    }
    .xing h1+p {
        width:160px;
        margin:20px auto;
        color:#ccc;
    }
    .xing ul {
        display:flex;
        flex-wrap:wrap;
    }
    .xing li {
        width:17%;
        height:240px;
        margin:20px 10px;
        text-align:center;
    }
    .xing li:hover {
        transition:all 0.5s;
        transform:translateY(-10px);
        box-shadow: 0 2px 16px #ccc, 0 0 1px #ccc, 0 0 1px #ccc; 
    }
    .xing img {
        width:100%;
        height:130px;
    }
    .xing .text {
        white-space: nowrap; 
        width: 140px; 
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .xing .title {
        font-size:16px;
        color:#ccc;
    }
    .xing .price {
        color:red;
    }
</style>